
var commentslist=[
    {
       'img':'img/img1.jpeg',
       "name":'重庆市网友',
       "text_p":'小编犯了一个常识性错误，伊朗不是阿拉伯成员国家，是波斯国。',
       "time":'22分钟前',
       "pl":'1',
       "morebtn":'hide',
       'list':[
           {
            'img':'img/user.jpg',
            "name":'重庆市网友',
            "text_p":'伊朗是阿拉伯国家，伊朗是阿拉伯国家，只是信仰有差异。一个逊尼尔派，一个什叶派，但 但是不能说不是阿拉伯人。',
            "time":'22分钟前',
            "pl":'1111'
           },
           {
            'img':'img/user.jpg',
            "name":'重庆市网友',
            "text_p":'小管他什么国，他们是穆斯林这总没错。',
            "time":'22分钟前',
            "pl":'1112'
           },
           {
            'img':'img/user.jpg',
            "name":'重庆市网友',
            "text_p":'小管他什么国，他们是穆斯林这总没错。',
            "time":'22分钟前',
            "pl":'1112'
           }
       ]
    },
    {
        'img':'img/img1.jpeg',
        "name":'重庆市网友',
        "text_p":'小编犯了一个常识性错误，伊朗不是阿拉伯成员国家，是波斯国。',
        "time":'22分钟前',
        "pl":'1',
        "morebtn":'show',
        'list':[
            {
             'img':'img/user.jpg',
             "name":'重庆市网友',
             "text_p":'伊朗是阿拉伯国家，伊朗是阿拉伯国家，只是信仰有差异。一个逊尼尔派，一个什叶派，但 但是不能说不是阿拉伯人。',
             "time":'22分钟前',
             "pl":'1111'
            },
            {
             'img':'img/user.jpg',
             "name":'重庆市网友',
             "text_p":'小管他什么国，他们是穆斯林这总没错。',
             "time":'22分钟前',
             "pl":'1112'
            },
            {
             'img':'img/user.jpg',
             "name":'重庆市网友',
             "text_p":'小管他什么国，他们是穆斯林这总没错。',
             "time":'22分钟前',
             "pl":'1112'
            }
        ]
     }
]
var commentshtml=''
if(commentslist.length>=1){
    commentslist.forEach((item,index)=>{
        commentshtml+=`
        <div class="Cslis_item list">
            <div class="name_box">
                <div class="img_"><img src="${item.img}" alt=""></div>
            </div>
            <div class="infor">
                <div class="item">
                    <div class="name_bt">${item.name}</div>
                    <div class="text_p">
                    ${item.text_p}
                    </div>
                    <div class="bot">
                        <span> ${item.time}</span>
                        <span > ${item.pl} <u class="replybtn" onclick="show_reply(this)">回复</u></span>
                    </div>
                    <div class="reply_input">
                        <input type="text" class="text_input" placeholder="回复：${item.name}">
                        <div class="poswrap">
                            <div class="fr">
                                <div class="buttom" onclick="submit_comments(this,1)">提交</div>
                            </div>
                        </div>
                    </div>
                </div>
                ${item.list.map(itm=>{
                    return `
                    <div class="list">
                        <div class="name_box">
                            <div class="img_"><img src="${itm.img}" alt=""></div>
                        </div>
                        <div class="infor">
                            <div class="item">
                                <div class="name_bt">${itm.name}</div>
                                <div class="text_p">
                                ${itm.text_p}
                                </div>
                                <div class="bot">
                                    <span>${itm.time}</span>
                                    <span >${itm.pl} <u class="replybtn" onclick="show_reply(this)">回复</u></span>
                                </div>
                                <div class="reply_input">
                                    <input type="text" class="text_input" placeholder="回复：${itm.name}">
                                    <div class="poswrap">
                                        <div class="fr">
                                            <div class="buttom"  onclick="submit_comments(this,2)">提交</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`
                }).join('')
            }
             <div class="morelis  ${item.morebtn}">展开其他10条回复 <span>&gt;</span> </div>
            </div>
        </div>
        `
    })
    commentshtml+='<a class="link_more">查看全部200条评论</a>'
}else{
    commentshtml+='<div class="nohtml">暂无评论内容</div>'
}

$(".Cslis_wrap").append(commentshtml);

//阻止事件冒泡
function stopNextEvent(evt) {
    var e = (evt) ? evt : window.event;
    if (window.event) {
        e.cancelBubble = true;// ie下阻止冒泡
    } else {
        //e.preventDefault();
        e.stopPropagation();// 其它浏览器下阻止冒泡
    }
}

//回复
function show_reply(obj) {
    var t_wrap = $(obj).parents('.item');
    $('.reply_input:visible').stop().slideUp(200,function(){
        hide_open_reply()
    });
    if($(obj).hasClass("on")){
        $(obj).removeClass("on")
        t_wrap.find('.reply_input').slideUp();
        t_wrap.find('.replybtn').text("回复")

    }else{
        $(obj).addClass("on");
        t_wrap.find('.reply_input').slideDown();
        t_wrap.find('.replybtn').text("取消回复")
    }
}
//关闭所有已展开的回复
function hide_open_reply() {
    //取消回复
    $(".reply_input:hidden").each(function () {
        var show_wrap = $(this).parent('.item');
        show_wrap.find('.replybtn').removeClass("on");
        show_wrap.find('.replybtn').text("回复")
    });
}
 

// 添加滑块js   加载页面上了  这个地方就不用写了1
// var myuserhost = "";
// a = document.getElementsByTagName("head")[0],
// s = document.createElement("link");
// s.rel = "stylesheet";
// s.href = myuserhost + "js/slidercaptcha/index.css";
// j = document.createElement("script");
// j.src = myuserhost + "js/slidercaptcha/index.js";
// a.appendChild(s);
// a.appendChild(j);
//  弹出滑块组件
var containerFluid=`
<div class="container-fluid">
        <div class="form-row">
            <div class="slidercaptcha card">
               <div class="close">&#xe630;</div>
                <div class="card-header">
                    <span>请完成安全验证</span>
                </div>
                <div class="card-body">
                    <div id="captcha"></div>
                </div>
            </div>
        </div>
    </div>`
$("body").append(containerFluid);

//  提交数据
var from_id=''
var from_text=''
function submit_comments(obj,id){
    let that
    if($(obj).parents('.Cs_postwrap').size()>=1){
          that =$(obj).parents('.Cs_postwrap')
    }else{
          that =$(obj).parents('.reply_input')
    }
    let input_ =that.find("input[type='text']").val();
    if(input_==''){
        alert("请输入内容")
    }else{
        from_id=id;
        from_text=input_;
        $(".container-fluid").stop().fadeToggle();
    }
}

function ajx(){
    console.log('ajx' ,from_id,from_text);
  }

$(function(){
    var captcha = sliderCaptcha({
        id: 'captcha',
        setSrc: function () {
            return 'js/slidercaptcha/img/Pic' + Math.round(Math.random() * 4) + '.jpg';
        },
        onSuccess: function () {
            console.log('成功');
            $(".container-fluid").stop().fadeToggle();
            captcha.reset()
            ajx()  //请求接口
        }
    });
    captcha.reset();
    $(".container-fluid .slidercaptcha .close").click(function(){
        $(".container-fluid").stop().fadeToggle();
        captcha.reset()
    })
})

 


